Pills

Within a form control, a pill represents an existing item in a database, as opposed to user-generated freeform text.

Basedev ready

Preview

Code

<a href="#void" class="slds-pill">
  <span class="slds-pill__label">Pill Label</span>
  <button class="slds-button slds-button--icon-bare slds-pill__remove">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>
    <span class="slds-assistive-text">Remove</span>
  </button>
</a>

Component Overview

The context of the pill can be either a link or static text. To create a pill, apply the .slds-pill class on a span or an a. Inside, place an element with the .slds-pill__label class around the text.

Additionally, a pill can have an icon or image that sits to the left-hand side of the .slds-pill__label. That icon or image should receive the class .slds-pill__icon.

You may also want the functionality to remove the pill as a selection. An "X" icon is normally used and will sit to the right-hand side of the .slds-pill__label. That icon should receive the class .slds-pill__remove.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-pill
Applied to:

<span>

Outcome:

Initializes pill

Required:

Required

Comments:

--

.slds-pill__label
Applied to:

<span>, <a>

Outcome:

Initializes pill label

Required:

Required

Comments:

--

.slds-pill__icon
Applied to:

<svg class="icon">

Outcome:

Initializes pill icon that sits to the left of the label

Required:

Required

Comments:

--

.slds-pill__remove
Applied to:

.slds-button

Outcome:

Initializes remove icon in pill that sits to the right of the label

Required:

Required

Comments:

--

.slds-pill_container
Applied to:

<div>

Outcome:

Container to hold pill(s) with borders

Required:

Required

Comments:

--

.slds-pill_container--bare
Applied to:

<div>

Outcome:

Container to hold pill(s) with no borders

Required:

No, optional element or modifier

Comments:

--

.slds-pill--bare
Applied to:

.slds-pill

Outcome:

Modifier that removes border and background from a pill

Required:

No, optional element or modifier

Comments:

--

.slds-pill-container
Deprecated
Applied to:

Outcome:

Container to hold pills(s)

Required:

No, optional element or modifier

Comments:

--